<!-- 头部导航栏 -->
<template>
  <div class="myheader">
    <el-header>
      <div class="logo">
        <img src="@/assets/components/logo.png" alt="">
      </div>
      <el-tabs v-model="activeName" class="border" @tab-click="handleClick">
        <el-tab-pane :label="item.text" :name="item.url" v-for="item in obj" :key="item.url"></el-tab-pane>
      </el-tabs>
    </el-header>
  </div>
</template>

<script>
export default {
  name: 'myheader',
  data(){
    return{
      activeName: '/',
      obj:[
        {url:'/',text:'首页'},
        {url:'/aboutUs',text:'关于我们'},
        {url:'/stadiumShow',text:'场馆展示'},
        {url:'/courseDescription',text:'课程介绍'},
        {url:'/eliteTeam',text:'精英团队'},
        {url:'/bookClass',text:'预约上课'},
      ]
    }
  },
  watch:{
    $route:{
      handler(val) {
        this.activeName = val.path;
      },
      immediate: true
    }
  },
  methods:{
    // 导航栏路由跳转
    handleClick(tab) {
      switch (tab.name) {
        case '/':
          this.$router.push({ path: "/" });
          break;
        case '/aboutUs':
          this.$router.push({ path: "/aboutUs" });
          break;
        case '/stadiumShow':
          this.$router.push({ path: "/stadiumShow" });
          break;
        case '/courseDescription':
          this.$router.push({ path: "/courseDescription" });
          break;
        case '/eliteTeam':
          this.$router.push({ path: "/eliteTeam" });
          break;
        case '/bookClass':
          this.$router.push({ path: "/bookClass" });
          break;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.myheader{
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
  .el-header{
    height: 87px !important;
    margin: 0 auto;
    opacity: 0.6;
    padding: 0 50px;
    display: flex;
    .logo{
      width: 386px;
      padding-right: 50px;
      img{
        margin-top: 8px;
      }
    }
    .border{
      width: 100%;
      ::v-deep .el-tabs__nav-wrap::after{
        height: 0;
      }
      ::v-deep .el-tabs__item{
        line-height: 87px;
        height: 87px;
        font-size: 18px;
      }
    }
  }
}
</style>
